<template>
  <div style="background:#fff;padding:20px">
    <crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <div>
      
      <el-form :inline="true" :model="searchForm" class="demo-form-inline" label-width="90px">
        
        <div>
          <el-form-item label="体检单号">
            <el-input v-model="searchForm.orderNo" placeholder="" @keyup.enter.native="enterFun"></el-input>
          </el-form-item>
          <el-form-item label="客户姓名">
            <el-input v-model="searchForm.customerName" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="证件号">
            <el-input v-model="searchForm.credNum" placeholder=""></el-input>
          </el-form-item>
          <!-- <el-form-item label="合同名称">
            <el-input v-model="searchForm.contractName" placeholder=""></el-input>
          </el-form-item> -->
          <el-button type="primary" @click="getCheckList">查询</el-button>
        </div>
      </el-form>
    </div>
    <div class="h2">
      <h3>
        <span>今日总人数（{{ personCount }}）</span>
        <span>今日已检人数（{{ checkedCount }}）</span>
        <span>今日未检人数（{{ noCheckedCount }}）</span>
      </h3>
      
<!--      <span>本科室已检人生（{{ departmentCheckedCount }}）</span>-->
    </div>
    <div class="tabelstyle">
      <el-table ref="multipleTable" :data="enterpriseList" tooltip-effect="dark" style="width: 100%" border :header-cell-style="headerstyle">
        <el-table-column type="selection" width="55"></el-table-column>
        <!-- <el-table-column prop="id" label="登记编号" width="120">
        </el-table-column> -->
        <el-table-column prop="orderNo" label="体检单号" width="200" align="center">
        </el-table-column>
        <el-table-column prop="customerName" label="姓名" width="100" align="center">
        </el-table-column>
        <el-table-column  label="性别" width="60" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.sex|sexcode}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="60" align="center">
        </el-table-column>
        <el-table-column prop="telephone" label="联系方式" width="150" align="center">
        </el-table-column>
        <el-table-column prop="credNum" label="证件号" width="250" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.credNum | formatCredNum}}
          </template>
        </el-table-column>
        <el-table-column prop="deptName" label="二级部门" width="120" align="center">
        </el-table-column>
        <el-table-column prop="contractName" label="合同名称" width="200" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="groupName" label="分组" width="120" align="center">
        </el-table-column>
        <el-table-column prop="name" label="操作" width="160"  fixed="right" align="center">
          <template slot-scope="scope">
            <!-- <el-button @click="toSavePage(scope.row)" type="primary" :disabled="scope.row.status>=10">体检录入</el-button> -->
            <el-button @click="toSavePage(scope.row)" size="mini" type="primary">体检录入</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import crumbs from "../../views/Crumbs.vue";
import userinfos from "../common/userinfos.vue";

export default {
  components: {
    crumbs,
    userinfos,
  },
  data() {
    return {
      headerstyle:{
        color:'#000',
        background:'#f2f2f2'
      },
      personCount: 0,
      checkedCount: 0,
      noCheckedCount: 0,
      departmentCheckedCount: 0,
      enterpriseList: [],
      enterpriseTotal: 0,
      dialogTableVisible1: false,
      // 体检医生
      firstmedical: {
        name: "",
        date: "2022-04-10"
      },
      department: {
        project: ""
      },
      form: {
        type: 123,
      },
      dialogVisible1: false,
      titleindex: 0,
      BreadCrumb: [
        {
          path: "/",
          name: "检中管理"
        },
        {
          path: "/front/contract",
          name: "体检科室"
        },
      ],
      dialogFormVisible: false,
      searchForm: {},
      pageSize: 10,
      pageNo: 1,
      total: 0,
    };
  },
  filters: {
    sexcode: function (item) {
      var ss = {1:'男',2:'女'}
      return ss[item]
    },
    formatCredNum: function (val) {
      if(val!==null){
        return val.replace(/^(.{6})(?:\d+)(.{4})$/,  "\$1****\$2")
      }
      return val
    },
  },
  created() {
    this.getCheckList()
    this.getPeOrdersMainPersonCount()
  },
  methods: {
    getCheckList(){
      // 新增根据科室显示列表
      const user = JSON.parse(localStorage.getItem("ms_userInfo"))
      // this.$set(this.searchForm,"deptId",user.deptIds)
      this.doGetList(this.searchForm)
    },
    doGetList(req){
      this.$axios.getPeExamRecordsCheckList(req).then(res => {
        if (res.code == '00000') {
          this.enterpriseList = res.data.records
          this.enterpriseTotal = res.data.total
          this.total=res.data.total
        }
      })
    },
    getPeOrdersMainPersonCount() {
      this.$axios.getPeOrdersMainPersonCount({}).then(res => {
        if (res.code == '00000') {
          this.personCount = res.data.personCount
          this.checkedCount = res.data.checkedCount
          this.noCheckedCount = res.data.noCheckedCount
          this.departmentCheckedCount = res.data.departmentCheckedCount
          // this.enterpriseList = res.data.peCustomerPeOrdersMainVOList
          this.enterpriseTotal = res.data.personCount
        }
      })
    },
    // 每页几条
    handleSizeChange(val) {
      this.pageSize = val
      const req = {
      	...this.searchForm,
				pageSize:this.pageSize,
				pageNo:this.pageNo,
      }
      this.doGetList(req)
    },
    // 第几页
    handleCurrentChange(val) {
      this.pageNo = val
      const req = {
      	...this.searchForm,
				pageSize:this.pageSize,
				pageNo:this.pageNo,
      }
      this.doGetList(req)
    },

    toSavePage(row) {
      console.log(row)
      this.$router.push({name: "visitphysician_save", query: {id: row.orderNo}});
      // console.log(row.orderNo)
      // this.$router.push({name: "visitphysician_save", query: {id: row.orderId}});
      console.log(row.orderId)
    },
    enterFun() {
      // console.log(row)
      // this.$router.push({name: "visitphysician_save", query: {id:this.searchForm.orderId}});
      this.$router.push({name: "visitphysician_save", query: {id:this.searchForm.orderNo}});
    },
    huitui() {
      this.$router.go(-1);
    },
    // 右侧title事件
    gettitle(row) {
      this.titleindex = row;
    },
  },
};
</script>

<style scoped>
.setinfo {
  padding: 30px 0 50px;
  text-align: center;
}

.setinfo i {
  margin-bottom: 20px;
  font-size: 80px;
  color: #0A93FD;
}

.dis_flex {
  display: flex;
}

.l_top_but {
  display: flex;
}

.flex_l {
  /* width: 48% !important; */
  flex-shrink: 0;
  padding-right: 1%;
  padding-left: 1%;
  padding-top: 10px;
}

.flex_r {
  width: 49% !important;
  flex-shrink: 0;
  padding-left: 1%;
}

.r_title_item {
  width: 150px;
  height: 30px;
  line-height: 40px;
  margin-left: 10px;
  font-size: 14px;
}

.r_title_item div:nth-child(2) {
  width: 100%;
  height: 2px;
}

.r_title_item div {
  text-align: center;
}

.l_title_item_active {
  font-weight: 600;
}

.l_title_item_active div:nth-child(2) {
  background: rgb(113, 157, 240);
}

.r_top_but {
  display: flex;
  justify-content: flex-end;
}

.top_but {
  width: 120px;
  margin-left: 30px;
}

.l_text {
  line-height: 40px;
}

.l_two_table {
  width: 100%;
  background-color: white;
  height: 640px;
  overflow: hidden;
  overflow-y: auto;
  padding-left: 25px;
  padding-top: 10px;
}

.table_row {
  padding-top: 10px;
  padding-bottom: 40px;
}

.table_column_in {
  display: flex;
}

.table_column {
  margin-left: 30px;
}

.table_value {
  width: 300px;
}

.table-but {
  padding-top: 10px;
}

.table_row .el-divider--horizontal {
  margin-top: 15px;
}

.l_two_table > h3 {
  margin-left: 20px;
}

.top_one {
  display: flex;
  font-size: 26px;
  font-weight: 600;
  justify-content: space-between;
}

.divider {
  margin-top: 15px;
  margin-bottom: 15px;
}

.top_one div {
  display: flex;
  width: 400px;
}

.top_one div:nth-child(3) {
  display: flex;
  justify-content: flex-end;
}

.info {
  display: flex;
}

.info-l {
  width: 20%;
  height: 500px;
  border: 1px solid #000000;
}

.info_checkbox {
  padding-left: 300px;
}

.info-r {
  margin-left: 30px;
}

.l_left {
  color: #7f7f7f;
  font-weight: bold;
  height: 36px;
}

.l_left > span {
  color: #d9001b;
}

.l_right {
  background: #f2f2f2;
  height: 100%;
  padding: 10px;
}

.r_list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 40px;
  color: #666666;
}

.r_list > span:first-child:hover {
  color: #2f9688;
  font-weight: bold;
}

.r_list > span:nth-child(2) {
  color: #d9001b;
}

.r_list > span:nth-child(2):hover {
  color: #2f9688;
  font-weight: bold;
}

.r_list > span {
  display: inline-block;
  width: 100%;
}

.l_bottom {
  margin-top: 30px;
}

.l_bottom > .bot {
  color: #ec808d;
  line-height: 35px;
}

.hint {
  width: 310px;
  /* height: 500px; */
  /* background: #ffffff; */
}

.examine {
  padding: 30px 20px;
  background: #ffffff;
  border: 1px solid #cccccc;
  width: 900px;
}

.mes_t {
  padding: 5px 0px;
  border-bottom: 1px solid black;
  /* width: 300px; */
}

.mes_two {
  display: flex;
  width: 500px;
  margin-right: 50px;
  justify-content: space-between;
}

.item_box {
  display: flex;
  justify-content: space-between;
}

.item_input {
  margin-top: 10px;
}

/* .item_bot {
  display: flex;
  margin-left: 50px;
} */

.top_dialog /deep/ .el-dialog {
  margin-top: 3vh !important;
}
.tabelstyle{

}
.h2{
  margin-bottom: 20px;
  color: #7F7F7F;
}
.h2 span{
  margin-right: 30px;
}
.tabelstyle /deep/.el-table td{
  padding:4px 0 !important;
}
</style>
